<template>
    <div v-if="show" style="width: 100%;height: 100%;">
        <flexBox style="width: 100%;height: 100%;" flex-direction="column" justifyContent="flex-start">
            <cControls :data="pageData.controls" v-if="pageData.controls && pageData.controls.length"
                style="width: 100%;padding: 4px 8px;"></cControls>
            <flexBox v-if="pageData.type == 1" style="width: 100%;height: 100%;">
                <flexBox v-if="pageData.left"
                    style="height: 100%;border-right: 1px solid rgb(230,230,230);border: 1px solid #409eff;position: relative;border-left: 0;border-bottom: 0;"
                    flex-direction="column" align-items="flex-start" justify-content="flex-start" :style="{
                        minWidth: leftWidth.width
                    }">
                    <div class="resizeBar-width" style="position: absolute;top: 0;right: 0;"
                        @mousedown="leftWidth.handleStart()">

                    </div>
                    <div
                        style="width: 100%;height: 25px;background-color: #409eff20;line-height: 25px;padding-left: 10px;color: #409eff;font-size: 15px;font-weight: bold;">
                        {{ pageData.left.title }}
                    </div>
                    <div style="width: 100%;position: relative;height: 100%;">
                        <div style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow-y: auto;">
                            <el-tree style="max-width: 100%;" :data="pageData.left.list" :props="pageData.left.props"
                                @node-click="pageData.left.callBack" />
                        </div>
                    </div>
                </flexBox>
                <flexBox flex-direction="column" v-if="pageData.main" style="height: 100%;width: 100%;">
                    <div v-if="pageData.main.title"
                        style="width: 100%;height: 40px;line-height: 40px;padding-left: 10px;color: #333;font-size: 20px;">
                        {{ pageData.main.title }}
                    </div>
                    <cControls :data="pageData.main.controls"
                        v-if="pageData.main.controls && pageData.main.controls.length"
                        style="width: 100%;padding: 4px 8px;"></cControls>
                    <flexBox style="width: 100%;height: 100%;" flex-direction="column" justifyContent="flex-start">
                        <div v-for="(item, index) in pageData.main.tab" style="width: 100%;position: relative;" :style="{
                            height: (showTab[index] || showTab[index] === undefined) ? (index ? (showTab[0] ? 'max-content' : '100%') : '100%') : ('26px'),
                            minHeight: (index && (showTab[index] || showTab[index] === undefined)) ? secondTabSize.height : 'unset'
                        }">
                            <div v-if="index && (showTab[index] || showTab[index] === undefined) && showTab[0]"
                                @mousedown="secondTabSize.handleStart()" class="resizeBar-height"
                                style="position: absolute;left: 0;top: 0;"></div>
                            <cTab @show="(e) => {
                                showTab[index] = e
                            }" :index="index" :data="item"
                                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;" :style="Object.assign(item.style || {}, {
                                    zIndex: index
                                })"></cTab>
                        </div>

                    </flexBox>
                </flexBox>
            </flexBox>
        </flexBox>

    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import content from '../modules/content'
import { useStore } from '../modules/store'
const store = useStore()
import tool from '../modules/tool'
import flexBox from '../components/flexBox.vue'
import cTab from '../components/cTab.vue'
import cControls from '../components/cControls.vue'

const showTab = ref({
    0: true,
    1: true
})

const leftWidth = reactive({
    width: tool.resize.get.mainType1LeftTreeWidth(),
    resizing: false,
    currentX: store.mousePosition.x,
    init() {
        tool.event.onChange('globalMouseUp', () => {
            this.resizing = false
        })
        watch(() => store.mousePosition, () => {
            if (this.resizing) {
                let t = store.mousePosition.x - this.currentX
                this.currentX += t

                let currentWidth = parseInt(this.width.split('px')[0])
                if (currentWidth + t < 130) return
                this.width = `${currentWidth + t}px`
                tool.resize.set.mainType1LeftTreeWidth(this.width)
            }
        }, {
            deep: true
        })
    },
    handleStart() {
        this.resizing = true
        this.currentX = store.mousePosition.x
    }
})

const secondTabSize = reactive({
    height: tool.resize.get.mainType1ContentTabHeight(),
    currentY: store.mousePosition.y,
    resizing: false,
    handleStart() {
        this.resizing = true
        this.currentY = store.mousePosition.y
    },
    init() {
        tool.event.onChange('globalMouseUp', () => {
            this.resizing = false
        })
        watch(() => store.mousePosition, () => {
            if (this.resizing) {
                let t = store.mousePosition.y - this.currentY
                this.currentY += t
                let currentHeight = parseInt(this.height.split('px')[0])
                if (currentHeight - t < 200) return
                if (currentHeight - t > (document.body.clientHeight - 123) / 5 * 4) return
                this.height = `${currentHeight - t}px`
                tool.resize.set.mainType1ContentTabHeight(this.height)
            }
        }, {
            deep: true
        })
    }
})

const props = defineProps({
    url: {
        type: String,
        default: ''
    }
})

const show = ref(false)
let pageData = ref({})

let consFunc = undefined

const initPage = async () => {
    if (consFunc === undefined) {
        consFunc = (await content[props.url](async () => {
            try {
                await initPage()
            } catch (error) {
                console.log(error)
                store.showModal(`${error}`, () => { }, false)
            }
        }, (err) => {
            throw err
        }))
    }
    pageData.value = await consFunc()
    leftWidth.init()
    show.value = true
}

onMounted(async () => {
    try {
        await initPage()
        secondTabSize.init()
    } catch (error) {
        console.log(error)
        tool.toast.info(`无法初始化页面 ${props.url}`)
        tool.event.setItem('closeMainPage', props.url)
    }
})

</script>

<style scoped></style>